<template>
  <a-spin :spinning="loading">
    <div class="page-miH page-bgBack">
      <PageHeader @back="$router.go(-1)" subTitle="返回"> 详情 </PageHeader>
      <div class="pageBox" :style="pageState === 'company' ? [{ paddingTop: null }] : null">
        <div class="leftBox">
          <div class="detailBox" style="justify-content: center">
            <a-tooltip>
              <template slot="title">
                {{ detail.schemeName }}
              </template>
              <div
                class="planTitle"
                style="
                  font-size: 18px;
                  font-weight: 500;
                  color: #3c3d43;
                  width: 240px;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  text-align: center;
                "
              >
                {{ detail.schemeName }}
              </div>
            </a-tooltip>
          </div>
          <div class="detailBox" style="justify-content: center">
            <div
              :style="[
                { padding: '0 8px 0 8px' },
                { height: '22px' },
                { background: `${selectList[detail.state].background}` },
                { borderRadius: '2px' },
                { fontSize: '12px' },
                { border: `1px solid ${selectList[detail.state].color}` },
                { color: `${selectList[detail.state].color}` },
                { textAlign: 'center' }
              ]"
            >
              {{ selectList[detail.state].name }}
            </div>
          </div>
          <div class="detailBox">
            <div class="detailTitle">{{ pageState === "company" ? "人资公司：" : "保险公司：" }}</div>
            <div class="detailContent">{{ pageState === "company" ? detail.customerName : detail.companyName }}</div>
          </div>
          <div class="detailBox">
            <div class="detailTitle">保险周期：</div>
            <div class="detailContent">
              {{ moment(detail.insEffectTime).format("YYYY-MM-DD") + "~" + moment(detail.insFailureTime).format("YYYY-MM-DD") }}
            </div>
          </div>
          <!-- <div class="detailBox">
            <div class="detailTitle">{{ pageState === "company" ? "实际保险月费：" : "保险月费：" }}</div>
            <div class="detailContent">{{ pageState === "company" ? detail.realityMonthAmount : detail.monthAmount }}</div>
          </div> -->
          <div class="detailBox">
            <div class="detailTitle">订单编号：</div>
            <div class="detailContent">{{ detail.id }}</div>
          </div>
          <div class="detailBox">
            <div class="detailTitle">最新提交时间：</div>
            <div class="detailContent">{{ moment(detail.latestSubmitTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
          </div>
          <div
            v-if="pageState === 'customer' || (pageState === 'company' && detail.state !== 0)"
            style="width: 100%; height: 1px; background: #e8e8e8; margin-top: 40px"
          ></div>
          <div v-if="pageState === 'customer'" style="display: flex; justify-content: center; margin-top: 36px">
            <a-button v-if="detail.state === 0" @click="undoOrder">撤销</a-button>
            <a-button v-if="detail.state === 1 || detail.state === 2" type="primary" style="margin-left: 12px" @click="uploadAgain"
              >重新上传</a-button
            >
          </div>
          <div v-if="pageState === 'company' && detail.state === 0" style="margin-top: 18px">
            <div
              v-if="latestTable"
              style="
                width: 260px;
                height: 76px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #e8e8e8;
                display: flex;
                align-items: center;
                padding-left: 16px;
              "
            >
              <img style="width: 48px; height: 48px" src="@/assets/img/detailIcon.png" alt="" />
              <a-button @click="downLoadFile(latestTable)" type="link">该订单最新投保明细单<a-icon type="download" /></a-button>
            </div>

            <div v-if="latestAttachment && latestAttachment.length" style="display: flex; margin-top: 20px">
              <div style="min-width: 72px; font-size: 14px; font-weight: 400; color: #a6a8b4">其他附件：</div>
              <div style="display: flex; flex-wrap: wrap">
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    min-width: 165px;
                    height: 28px;
                    border-radius: 3px;
                    border: 1px solid #e8e8e8;
                    cursor: pointer;
                    margin: 0 0 8px 8px;
                  "
                  v-for="(item, index) in latestAttachment"
                  :key="index"
                  @click="downLoadFile(item.url)"
                >
                  <a-icon class="primaryColor" type="link" />
                  <div style="width: 120px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
                    {{ item.name }}
                  </div>
                  <a-icon class="primaryColor" type="download" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightBox">
          <div style="display: flex; justify-content: space-between">
            <div class="contentTitle">投保方案明细</div>
            <a-pagination :pageSize="5" @change="onChange" :total="detail.personTypeList.length" />
          </div>
          <div
            v-if="detail.state === 3 || detail.state === 4 || detail.state === 5"
            style="display: flex; justify-content: flex-start; align-items: center"
          >
            <div class="label" style="height: auto">费用合计：</div>
            <div class="combined">{{ pageState === "customer" ? detail.totalFee : detail.actualTotalFee }}</div>
          </div>
          <div style="margin-top: 6px; display: flex; flex-wrap: wrap">
            <div style="width: 20%" v-for="(item, index) in detail.personTypeList" :key="index">
              <div
                v-if="(typeCurrent === 1 && index < 5) || (typeCurrent === 2 && index >= 5)"
                style="
                  padding: 16px 14px;
                  margin: 12px 12px 0 0;
                  min-height: 80px;
                  background: #ffffff;
                  box-shadow: 0px 4px 12px 0px rgba(106, 102, 246, 0.1);
                  border-radius: 8px;
                "
              >
                <a-tooltip>
                  <template slot="title">
                    {{ item.typeName }}
                  </template>
                  <div
                    style="
                      font-size: 14px;
                      font-weight: 500;
                      color: #55565d;
                      width: 98px;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      overflow: hidden;
                    "
                  >
                    {{ item.typeName }}
                  </div>
                </a-tooltip>
                <div style="margin-top: 8px; display: flex; flex-wrap: wrap">
                  <div class="label" :style="[{ minWidth: pageState === 'customer' ? '66px' : '88px' }]">
                    {{ pageState === "customer" ? "保险月费:" : "实际保险月费:" }}
                  </div>
                  <a-tooltip>
                    <template slot="title">
                      {{ pageState === "customer" ? item.monthAmount : item.realityMonthAmount }}
                    </template>
                    <div
                      style="margin-left: 4px; width: 48px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden"
                      class="value"
                    >
                      {{ pageState === "customer" ? item.monthAmount : item.realityMonthAmount }}
                    </div>
                  </a-tooltip>
                </div>
                <div
                  v-if="detail.state === 3 || detail.state === 4 || detail.state === 5"
                  style="margin-top: 8px; display: flex; flex-wrap: wrap"
                >
                  <div style="min-width: 66px" class="label">投保人数:</div>
                  <a-tooltip>
                    <template slot="title">
                      {{ item.personCount }}
                    </template>
                    <div style="width: 48px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden" class="value">
                      {{ item.personCount }}
                    </div>
                  </a-tooltip>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top: 24px" class="contentTitle">审核记录</div>
          <div class="listBox">
            <div class="recordItem" v-for="(item, index) in recordList" :key="index">
              <div style="display: flex; justify-content: space-between; align-items: center">
                <div style="display: flex">
                  <div
                    :style="[
                      { padding: '0 8px 0 8px' },
                      { height: '22px' },
                      { lineHeight: '20px' },
                      { background: `${selectList[item.state].background}` },
                      { borderRadius: '16px' },
                      { fontSize: '12px' },
                      { border: `1px solid ${selectList[item.state].color}` },
                      { color: `${selectList[item.state].color}` },
                      { textAlign: 'center' }
                    ]"
                  >
                    {{ selectList[item.state].name }}
                  </div>
                  <div style="margin-left: 16px">
                    <span class="detailTitle">反馈时间：</span
                    ><span class="detailContent">{{ moment(item.gmtCreate).format("YYYY-MM-DD HH:mm:ss") }}</span>
                  </div>
                </div>
                <a-button @click="downLoadFile(item.detailFile)" type="link">本次上传的投保人员明细表<a-icon type="download" /></a-button>
              </div>
              <!-- <div v-if="item.state!==0" style="display: flex; margin-top: 12px">
                <div>
                  <div class="detailTitle">投保人数</div>
                  <div style="font-size: 16px; font-weight: bold; color: #333333; margin-top: 6px">{{ item.insuredNumber }}</div>
                </div>
                <div style="margin-left: 64px">
                  <div class="detailTitle">{{ pageState === "company" ? "实际费用合计" : "费用合计" }}</div>
                  <div style="font-size: 16px; font-weight: bold; color: #333333; margin-top: 6px">
                    {{ pageState === "company" ? item.actualTotalFee : item.totalFee }}
                  </div>
                </div>
              </div> -->
              <div style="display: flex; margin-top: 14px" v-if="(item.state === 1 || item.state === 3) && item.auditResultsCause">
                <div class="detailTitle">
                  {{ item.state === 1 ? "拒绝原因：" : "通过原因：" }}
                </div>
                <a-tooltip>
                  <template slot="title">
                    {{ item.auditResultsCause }}
                  </template>

                  <div style="width: 500px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden" class="detailContent">
                    {{ item.auditResultsCause }}
                  </div>
                </a-tooltip>
              </div>
              <div
                v-if="
                  (item.companyAttachment && item.companyAttachment.length) || (item.customerAttachment && item.customerAttachment.length)
                "
                style="display: flex; margin-top: 14px"
              >
                <div class="detailTitle" style="min-width: 120px">
                  {{ item.state === 0 ? "由人资公司上传：" : "由保险公司上传：" }}
                </div>
                <div style="display: flex; flex-wrap: wrap" v-if="item.state === 0">
                  <div
                    style="
                      height: 28px;
                      border-radius: 3px;
                      border: 1px solid #e8e8e8;
                      cursor: pointer;
                      margin: 0 0 8px 8px;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    "
                    v-for="(item, index) in item.customerAttachment"
                    :key="index"
                    @click="downLoadFile(item.url)"
                  >
                    <a-icon class="primaryColor" type="link" />
                    <a-tooltip>
                      <template slot="title">
                        {{ item.name }}
                      </template>
                      <div style="text-align: center; width: 120px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
                        {{ item.name }}
                      </div>
                    </a-tooltip>
                    <a-icon class="primaryColor" type="download" />
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap" v-else>
                  <div
                    style="
                      height: 28px;
                      border-radius: 3px;
                      border: 1px solid #e8e8e8;
                      cursor: pointer;
                      margin: 0 0 8px 8px;
                      line-height: 26px;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    "
                    v-for="(item, index) in item.companyAttachment"
                    :key="index"
                    @click="downLoadFile(item.url)"
                  >
                    <a-icon class="primaryColor" type="link" />
                    <a-tooltip>
                      <template slot="title">
                        {{ item.name }}
                      </template>
                      <div style="text-align: center; width: 120px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
                        {{ item.name }}
                      </div>
                    </a-tooltip>
                    <a-icon class="primaryColor" type="download" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            v-if="recordList && recordList.length"
            style="width: 100%; display: flex; padding: 24px 0 24px 24px; justify-content: flex-end; align-items: center"
          >
            <a-pagination v-model="current" :pageSize="5" :total="total" @change="onPageChange" />
          </div>
        </div>
        <a-modal :visible="againVisible" @ok="againOK" @cancel="againCancel" title="重新上传" :width="600">
          <!-- <a-alert message="填写投保人数，系统将自动计算预估费用" type="warning" closable /> -->
          <div class="againBox">
            <div class="alignItem">
              <div class="detailTitle">保险周期：</div>
              <div class="detailContent">
                {{ moment(detail.insEffectTime).format("YYYY-MM-DD") + "~" + moment(detail.insFailureTime).format("YYYY-MM-DD") }}
              </div>
            </div>
            <!-- <div class="alignItem">
              <div class="detailTitle">保险月费：</div>
              <div class="detailContent">{{ detail.monthAmount }}</div>
            </div> -->
            <div class="alignItem">
              <div class="detailTitle" style="margin-top: 8px"><span style="color: red">*</span>投保明细表：</div>
              <div class="detailContent">
                <a-upload
                  ref="upload"
                  :file-list="fileList"
                  :headers="headers"
                  action="/file/api/v1/general/upload/attachment"
                  @change="handleChange"
                  accept=".xls, .xlsx"
                  name="files"
                  :showUploadList="{
                    showDownloadIcon: true
                  }"
                  @download="download"
                >
                  <a-button>{{ !fileList.length ? "上传文件" : "重新上传" }}</a-button>
                </a-upload>
              </div>
            </div>
            <div class="alignItem">
              <div class="detailTitle" style="min-width: 99px; margin-top: 8px">其他附件：</div>
              <div class="detailContent">
                <a-upload
                  ref="upload"
                  :file-list="fileListMultiple"
                  :headers="headers"
                  action="/file/api/v1/general/upload/attachment"
                  @change="handleChangeMultiple"
                  name="files"
                  :showUploadList="{
                    showDownloadIcon: true
                  }"
                  @download="download"
                >
                  <a-button type="primary">添加文件</a-button>
                </a-upload>
              </div>
            </div>
            <!-- <div class="alignItem">
              <div class="detailTitle" style="margin-top: 8px"><span style="color: red">*</span>投保人数：</div>
              <div class="detailContent">
                <a-input-number
                  :precision="0"
                  :min="0.01"
                  v-model="empNumber"
                  @change="combinedChange"
                  placeholder="请输入"
                  style="width: 300px"
                />
              </div>
            </div>
            <div class="alignItem">
              <div class="detailTitle">预估费用总计：</div>
              <div class="detailContent">{{ combined }}</div>
            </div> -->
          </div>
        </a-modal>
      </div>
      <div
        v-if="pageState === 'company' && detail.state === 0 && $hasPermission('insurance:insuranceService.auditList:audit')"
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          height: 60px;
          width: 100%;
          box-shadow: inset 0px 1px 0px 0px #e8e8e8;
          background: #ffffff;
          position: fixed;
          bottom: 0;
          left: 0;
        "
      >
        <a-button @click="audit(1)">驳回</a-button><a-button @click="audit(2)" style="margin-left: 12px" type="primary">通过</a-button>
      </div>
      <a-modal
        :width="600"
        :title="passOrRefuse === 1 ? '驳回理由' : '审核通过'"
        :visible="auditVisible"
        @cancel="auditVisible = false"
        @ok="auditOk"
      >
        <div v-if="detail.personTypeList && passOrRefuse === 2" style="margin-top: 12px">
          <div
            style="
              padding: 0 36px;
              width: 526px;
              height: 48px;
              background: #fafafa;
              box-shadow: inset 0px -1px 0px 0px #e8e8e8;
              display: flex;
              justify-content: flex-start;
              align-items: center;
            "
          >
            <div style="font-size: 14px; font-weight: 500; color: #252525">职业分类</div>
            <div style="margin-left: 90px; font-size: 14px; font-weight: 500; color: #252525">实际保险月费</div>
            <div style="margin-left: 72px; font-size: 14px; font-weight: 500; color: #252525">
              <span style="color: #fa5051">*</span>投保人数
            </div>
          </div>
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: flex-start;
              width: 526px;
              height: 48px;
              background: #ffffff;
              box-shadow: inset 0px -1px 0px 0px #e8e8e8;
            "
            v-for="(item, index) in detail.personTypeList"
            :key="index"
          >
            <a-tooltip>
              <template slot="title">
                <div>{{ item.typeName }}</div>
              </template>
              <div style="width: 120px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-left: 36px" class="value">
                {{ item.typeName }}
              </div>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                <div>{{ item.realityMonthAmount }}</div>
              </template>
              <div style="width: 120px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-left: 30px" class="value">
                {{ item.realityMonthAmount }}
              </div>
            </a-tooltip>
            <a-input-number
              :formatter="limitNumber"
              :parser="limitNumber"
              :min="0"
              @change="calculate"
              v-model="item.personCount"
              placeholder="请输入"
              style="width: 180px; margin-left: 32px"
            />
          </div>
        </div>
        <div
          v-if="detail.personTypeList && passOrRefuse === 2"
          style="margin-top: 18px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px"
        >
          <div style="display: flex">
            <div class="detailTitle">保险周期：</div>
            <div class="detailContent">
              {{ moment(detail.insEffectTime).format("YYYY-MM-DD") + "~" + moment(detail.insFailureTime).format("YYYY-MM-DD") }}
            </div>
          </div>
          <div style="display: flex; align-items: center">
            <div class="label" style="height: auto">实际费用合计：</div>
            <div class="combined">{{ combined }}</div>
          </div>
        </div>
        <a-textarea
          v-model="auditResultsCause"
          :placeholder="passOrRefuse === 1 ? '驳回理由' : '通过理由'"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
        <div style="margin-top: 12px; display: flex">
          <div class="detailTitle" style="min-width: 32px">附件：</div>
          <div>
            <a-upload
              ref="upload"
              :file-list="auditFileList"
              :headers="headers"
              action="/file/api/v1/general/upload/attachment"
              @change="handleChangeAudit"
              :showUploadList="{
                showDownloadIcon: true
              }"
              @download="download"
              name="files"
            >
              <a-button style="margin-left: 8px"><a-icon type="plus" />添加附件</a-button>
            </a-upload>
          </div>
        </div>
      </a-modal>
    </div>
  </a-spin>
</template>
<script>
import { recordList, reUpload, getDetailByOrderId, undoOrder, companyAudit, getDownloadFile } from "./api";
import { publicDownLoad } from "../downLoad";
import moment from "moment";
import { getToken } from "xqjr-module-auth";
import { number } from "mathjs";
const math = require("mathjs");
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      fileList: [],
      headers: {},
      auditResultsCause: undefined,
      recordList: ["1", "2", "3"],
      auditFileList: [],
      detail: {},
      combined: 0,
      current: 1,
      total: 0,
      empNumber: undefined,
      loading: false,
      againVisible: false,
      detailTemplateFile: "",
      pageState: null,
      detailTemplateFileName: "",
      fileListMultiple: [],
      fileListMultipleCopy: [],
      auditFileListCopy: [],
      latestTable: null,
      latestAttachment: [],
      typeCurrent: 1,
      passOrRefuse: null,
      auditVisible: false,
      selectList: [
        { name: "待核保审核", value: "0", color: "#4282FF", background: "rgba(66, 130, 255, 0.2)" },
        { name: "核保审核不通过", value: "1", color: "#FA5051", background: "rgba(250, 80, 81, 0.2)" },
        { name: "已撤销", value: "2", color: "#8D8D8D", background: "rgba(171, 171, 171, 0.2)" },
        { name: "核保审核通过", value: "3", color: "#24CDAA", background: "rgba(36, 205, 170, 0.2)" },
        { name: "进行中", value: "4", color: "#FFA600", background: " rgba(255, 166, 0, 0.2)" },
        { name: "已结束", value: "5", color: "#8D8D8D", background: "rgba(171, 171, 171, 0.2)" }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {
    this.headers = {
      token: getToken()
    };
    var detail = JSON.parse(this.$route.query.detail);
    this.pageState = sessionStorage.getItem("shangbaoPageState");
    this.loading = true;
    var type = this.pageState === "company" ? "insuranceCompany" : "customer";
    getDetailByOrderId(detail.id, type)
      .then((res) => {
        this.detail = res.data;
        this.getRecordList();
      })
      .catch((err) => {
        console.log(err);
        this.loading = false;
      });
  },
  mounted() {},
  methods: {
    limitNumber(value) {
      if (typeof value === "string") {
        return !isNaN(Number(value)) && value !== "0" ? value.replace(/^(0+)|[^\d]/g, "") : value === "0" ? "0" : "";
      } else if (typeof value === "number") {
        return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, "") : "";
      } else {
        return "";
      }
    },
    calculate(e) {
      if (this.detail.insEffectTime && this.detail.insFailureTime) {
        var startDate = moment(moment(moment(this.detail.insEffectTime).format("YYYY-MM-DD"), "YYYY-MM-DD")).format("YYYY-MM");
        var endDate = moment(moment(moment(this.detail.insFailureTime).format("YYYY-MM-DD"), "YYYY-MM-DD")).format("YYYY-MM");
        var monthDiff = moment(endDate).diff(moment(startDate), "month") + 1;
      }
      this.combined = 0;
      this.detail.personTypeList.forEach((item, index) => {
        this.combined = Number(
          this.$NumberAdd(this.combined, this.$NumberMul(this.$NumberMul(item.realityMonthAmount, item.personCount), monthDiff))
        );
      });
    },
    onChange(current) {
      this.typeCurrent = current;
    },
    download(file) {
      if (file.url) {
        publicDownLoad(file.url);
      } else if (file.response.data && file.response.data[0]) {
        publicDownLoad(file.response.data[0]);
      } else {
        this.$message.warning("文件下载失败");
      }
    },
    // 审核
    audit(e) {
      this.auditVisible = true;
      this.passOrRefuse = e;
      this.combined = 0;
    },
    auditOk() {
      var nextState = true;
      this.detail.personTypeList.forEach((item) => {
        if (!item.personCount && item.personCount !== 0) {
          nextState = false;
        }
      });
      if (nextState || this.passOrRefuse === 1) {
        this.loading = true;
        companyAudit({
          id: this.detail.id,
          passOrRefuse: this.passOrRefuse !== 1,
          companyAttachment: this.auditFileListCopy,
          auditResultsCause: this.auditResultsCause,
          personTypeList: this.passOrRefuse === 2 ? this.detail.personTypeList : undefined,
          actualTotalFee: this.passOrRefuse === 2 ? this.combined : undefined
        }).then((res) => {
          this.auditVisible = false;
          this.$message.success("审核成功");
          var type = this.pageState === "company" ? "insuranceCompany" : "customer";
          getDetailByOrderId(this.detail.id, type)
            .then((res) => {
              this.detail = res.data;
              this.getRecordList();
            })
            .catch((err) => {
              console.log(err);
              this.loading = false;
            });
        });
      } else {
        this.$message.warning("请填写投保人数");
      }
    },
    // 重新上傳
    againOK() {
      if (!this.fileList.length) {
        this.$message.warning("请上传投保明细表");
      } else {
        this.loading = true;
        reUpload({
          id: this.detail.id,
          detailFile: this.detailTemplateFile,
          customerAttachment: this.fileListMultipleCopy
          // insuredNumber: this.empNumber,
          // totalFee: this.combined
        }).then((res) => {
          this.againVisible = false;
          this.$message.success("上传成功");
          var type = this.pageState === "company" ? "insuranceCompany" : "customer";
          getDetailByOrderId(this.detail.id, type)
            .then((res) => {
              this.detail = res.data;
              this.getRecordList();
            })
            .catch((err) => {
              console.log(err);
              this.loading = false;
            });
        });
      }
    },
    // 撤销
    undoOrder() {
      var that = this;
      this.$confirm({
        title: "确定撤销订单吗?",
        onOk() {
          that.loading = true;
          undoOrder(that.detail.id).then((res) => {
            that.$message.success("撤销成功");
            var type = that.pageState === "company" ? "insuranceCompany" : "customer";
            getDetailByOrderId(that.detail.id, type)
              .then((res) => {
                that.detail = res.data;
                that.getRecordList();
              })
              .catch((err) => {
                console.log(err);
                that.loading = false;
              });
          });
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "test"
      });
    },
    handleChangeAudit(info) {
      if ([...info.fileList] && [...info.fileList].length > 10) {
        this.$message.warning("最多上传十个附件");
      } else {
        let fileList = [...info.fileList];
        fileList = fileList.map((file) => {
          if (file.response) {
            file.url = file.response.url;
          }
          return file;
        });
        this.auditFileList = fileList;
        var arr = [];
        if (this.auditFileList && this.auditFileList.length) {
          this.auditFileList.forEach((item, index) => {
            if (item.status === "done" && item.response.data && item.response.data[0]) {
              arr.push({ name: item.name, url: item.response.data[0] });
            }
          });
        }
        if (arr && arr.length) {
          this.auditFileListCopy = JSON.stringify(arr);
        } else {
          this.auditFileListCopy = undefined;
        }
      }
    },
    handleChangeMultiple(info) {
      if ([...info.fileList] && [...info.fileList].length > 10) {
        this.$message.warning("最多上传十个附件");
      } else {
        let fileList = [...info.fileList];
        fileList = fileList.map((file) => {
          if (file.response) {
            file.url = file.response.url;
          }
          return file;
        });
        this.fileListMultiple = fileList;
        var arr = [];
        if (this.fileListMultiple && this.fileListMultiple.length) {
          this.fileListMultiple.forEach((item, index) => {
            if (item.status === "done" && item.response.data && item.response.data[0]) {
              arr.push({ name: item.name, url: item.response.data[0] });
            }
          });
        }
        if (arr && arr.length) {
          this.fileListMultipleCopy = JSON.stringify(arr);
        } else {
          this.fileListMultipleCopy = undefined;
        }
      }
    },
    handleChange(info) {
      let fileList = [...info.fileList];
      fileList = fileList.slice(-1);
      fileList = fileList.map((file) => {
        if (file.response) {
          file.url = file.response.url;
        }
        return file;
      });
      this.fileList = fileList;
      if (this.fileList && this.fileList.length) {
        if (this.fileList[0].status === "done" && this.fileList[0].response.data && this.fileList[0].response.data[0]) {
          this.detailTemplateFile = this.fileList[0].response.data[0];
          this.detailTemplateFileName = this.fileList[0].name;
        }
      } else {
        this.detailTemplateFile = "";
        this.detailTemplateFileName = "";
      }
    },
    // combinedChange(e) {
    //   if (this.detail.insEffectTime && this.detail.insFailureTime) {
    //     var startDate = moment(moment(moment(this.detail.insEffectTime).format("YYYY-MM-DD"), "YYYY-MM-DD")).format("YYYY-MM");
    //     var endDate = moment(moment(moment(this.detail.insFailureTime).format("YYYY-MM-DD"), "YYYY-MM-DD")).format("YYYY-MM");
    //     var monthDiff = moment(endDate).diff(moment(startDate), "month") + 1;
    //   }
    //   if (this.detail.monthAmount && monthDiff) {
    //     this.combined = this.detail.monthAmount * e * monthDiff;
    //   } else {
    //     this.combined = 0;
    //   }
    // },
    downLoad(e) {
      window.open(e);
    },
    downLoadFile(e) {
      publicDownLoad(e);
    },
    onPageChange() {
      this.getRecordList();
    },
    getRecordList() {
      recordList({
        pageSize: 5,
        pageNo: this.current,
        orderId: this.detail.id
      })
        .then((res) => {
          this.recordList = res.data.entities;
          this.recordList.forEach((item) => {
            if (item.customerAttachment) {
              item.customerAttachment = JSON.parse(item.customerAttachment);
            }
            if (item.companyAttachment) {
              item.companyAttachment = JSON.parse(item.companyAttachment);
            }
          });
          if (this.recordList && this.recordList.length) {
            this.latestTable = this.recordList[0].detailFile || null;
            this.latestAttachment = this.recordList[0].customerAttachment || [];
          }
          this.total = res.data.entityCount;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    uploadAgain() {
      this.againVisible = true;
      this.fileList = [];
      this.fileListMultiple = [];
      this.empNumber = undefined;
    },
    againCancel() {
      this.againVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .ant-upload-list-item {
  width: 360px;
  .ant-upload-list-item-name {
    width: 270px;
  }
}
.label {
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #a6a8b4;
}
.value {
  font-size: 14px;
  font-weight: 400;
  color: #636572;
}
.againBox {
  .alignItem {
    display: flex;
  }
  padding: 8px 0 0 80px;
  .titleBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  }
  .contentBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .detailTitle {
    font-size: 14px;
    font-weight: 400;
    color: #a6a8b4;
    min-height: 44px;
    margin-top: 4px;
    width: 100px;
    text-align: right;
  }
  .detailContent {
    font-size: 14px;
    font-weight: 400;
    color: #636572;
    margin-top: 4px;
    min-height: 44px;
  }
}
.detailTitle {
  font-size: 14px;
  font-weight: 400;
  color: #a6a8b4;
}
.detailContent {
  font-size: 14px;
  font-weight: 400;
  color: #636572;
}
.pageBox {
  padding: 24px;
  display: flex;
  padding-bottom: 60px;
  .leftBox {
    min-width: 300px;
    width: 300px;
    height: 754px;
    background: #ffffff;
    box-shadow: 0px 4px 12px 0px rgba(106, 102, 246, 0.1);
    border-radius: 4px;
    padding: 8px 24px 0 24px;
    .detailBox {
      display: flex;
      margin-top: 16px;
      align-items: center;
      .detailTitle {
        font-size: 14px;
        font-weight: 400;
        color: #a6a8b4;
      }
      .detailContent {
        font-size: 14px;
        font-weight: 400;
        color: #636572;
      }
    }
  }
  .rightBox {
    width: 100%;
    padding-left: 24px;
    .listBox {
      margin-top: 8px;
      .recordItem {
        min-height: 80px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 0px rgba(106, 102, 246, 0.1);
        width: 100%;
        margin-top: 16px;
        padding: 24px;
      }
    }
    .contentTitle {
      font-size: 16px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      border-left: 3px solid var(--primary);
      padding-left: 8px;
      height: 20px;
      line-height: 20px;
    }
  }
}
.primaryColor {
  margin: 0 8px;
  color: var(--primary);
}
.combined {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary);
}
</style>
